<template>
  <div class="wrapper">
    <ul class="box">
      <li v-for="item of list">{{item}}</li>
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: "Basic",
    data() {
      return {
        list: [],
        num: 0,
      }
    },
    created() {
      this.addNumber()
    },
    mounted() {

      this.$nextTick(() => {
        const bs = new BScroll('.wrapper', {
          // 是否实时监听scroll：0，1：不监听；2：监听手指滑动，但没有监听惯性的滑动；3：监听手指滑动和惯性滚动
          probeType: 3,
          click: false, // 是否监听scroll内部的click事件，默认获取不到了
          pullUpLoad: { // 是否上拉加载更多：oolean|Object；对应事件：pullingUp
            threshold: 100, // 距离
          }
        })


        // 默认是没有监听的，需要给new增加参数
        bs.on('scroll', (positions) => {
          // console.log('位置：',positions); // {x: 0, y: -6467.921875}
        })

        // 触底函数：默认只会执行一次
        bs.on('pullingUp', () => {
          console.log('pullingUp：', '上拉加载更多');


          // 异步操作完成后，将数据添加进去，重新监听
          setTimeout(() => {
            this.addNumber()

            bs.refresh();//重新计算高度
            bs.finishPullUp() // 重新监听滚动到底部的函数
          }, 2000)

        })
      })

    },
    methods: {
      // 添加数据
      addNumber() {
        for (let i = 1 + 100 * this.num; i < 100 + 100 * this.num; i++) {
          this.list.push(i)
        }
        this.num += 1;
      }
    }
  }
</script>

<style scoped lang="less">
  .wrapper {
    height: 200px;
    border: 1px solid #ccc;
    overflow: hidden;
    .box {
      li {
        height: 25px;
      }
    }
  }
</style>
